<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<html>
<head>
<meta name="keywords" content="IoT, iot,物联网,物联,互联网,智能硬件,连旅物联,linktrip" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<script src="${contextPath}/jscompatible/html5shiv.min.js"></script>
<script src="${contextPath}/jscompatible/respond.min.js"></script>
<title>登录</title>
<style type="text/css">
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-size: 100% 100%;
	font-size: 14px;
	font-family: 'Microsoft YaHei';
}

.user {
	width: 380px;
	height: 46px;
	border: solid #848484 1px;
	padding-left: 1px;
	margin-top: 50px;
	line-height: 46px;
	border-radius: 4px
}

.pwd {
	width: 380px;
	height: 46px;
	margin-top: 10px;
	border: solid #848484 1px;
	padding-left: 1px;
	line-height: 46px;
	border-radius: 4px;
}

.btn {
	background-image: url("${contextPath}/images/btn_normal.jpg");
	width: 380px;
	height: 46px;
	margin-top: 7px;
	margin-left: 40px;
	width: 380px;
	border: solid #848484 0px;
	border-radius: 4px;
	color: white;
	font-size: 18px;
}

.btn:hover {
	cursor: pointer;
	background-image: url("${contextPath}/images/btn_hover.jpg");
}

.tips {
	color: #f00;
}

.top {
	background-image: url(${contextPath}/images/bg.png);
	background-repeat: no-repeat;
	background-size: contain;
	backgrond-attachment: fixed;
	background-position: top;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	width: 100%;
	height: 50%;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${contextPath}/images/bg.png',
		sizingMethod='scale');
}

div {
	text-align: center
}

.span {
	height: 32px;
	width: 32px;
	line-height: 32px;
	text-align: center;
	vertical-align: middle;
}

span {
	height: 32px;
	line-height: 32px;
	margin-left: 20px;
}
</style>
</head>
<body>
	<div class="top"></div>

	<div id="div_login">

		<div id="div_username">
			<img src="${contextPath}/images/user.png" class="span" /><input
				type="text" class="user" name="user_name" id="user_name"
				placeholder="请输入帐号" onkeydown="getKey()">
		</div>
		<span class="tips" id="user_msg"></span>

		<div id="div_userpass">
			<img src="${contextPath}/images/passwd.png" class="span" /> <input
				type="password" class="pwd" name="user_passwd" id="user_passwd"
				placeholder="请输入密码" onkeydown="getKey()">
		</div>
		<span id="passwd_msg" class="tips"></span>
		<div>
			<button class="btn" id="btn_login" onclick="javascript:login()">登录</button>
		</div>
	</div>

	<script src="${contextPath}/scripts/jquery-1.9.1.min.js"></script>
	
	<script type="text/javascript">
		function login() {
			var name = $("#user_name").val();
			var pwd = $("#user_passwd").val();
			var exp = new RegExp("^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$");

			if (name == "") {
				$("#user_msg").html("*帐号不能为空");
				return;
			} else if ((name.length < 5) || (name.length > 15)) {
				$("#user_msg").html("*输入账号必须为5-15位数字或字母");
				return;
			} else {
				$("#user_msg").html("");
			}

			if (pwd == "") {
				$("#passwd_msg").html("*密码不能为空");
				return;
			} else if (exp.test(pwd) == false) {
				$("#passwd_msg").html("*输入密码必须为6-10位数字加字母");
				return;
			} else {
				$("#passwd_msg").html("");
			}

			var formdata = {
				name : name,
				pwd : pwd
			};

			$("#btn_login").disabled = "disabled";

			$.ajax({
				url : "${contextPath}/service/user/checkLogin.lt",
				timeout : 30000,
				dataType : "json",
				type : "post",
				data : formdata,
				success : function(data) {
					if (data == 200) {
						location.href = "${contextPath}/redirect/main.lt";
					} else {
						alert("用户名或者密码错误!");
					}
				},
				error : function(req, msg, err) {
				}
			});
		}

		function getKey() {
			if (event.keyCode == 13) {
				login();
			}
		}
	</script>
</body>
</html>
